<script setup lang="ts">
import { computed, ref } from "vue";
import { RouterView } from "vue-router";
import dayjs from "dayjs";
import { ConfigStore } from "@/stores/modules/config";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";

const configState = ConfigStore();
const themeConfig = computed(() => configState.themeConfig);

const locale = computed(() => {
  switch (configState.language) {
    case "en":
      return en;
    case "zh-cn":
      return zhCn;
    default:
      return zhCn;
  }
});

const watermark = ref({
  content: ['sofast admin', dayjs().format('YYYY-MM-DD HH:mm:ss')],
  font: {
    fontSize: 13,
  }
});

</script>

<template>
  <el-config-provider :locale="locale" :size="themeConfig.size">
    <el-watermark class="h-full" :content="watermark.content" :font="watermark.font">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component"></component>
        </keep-alive>
      </router-view>
    </el-watermark>
  </el-config-provider>
</template>

<style>
body,
#app {
  height: 100vh;
}
</style>
